import React, { Component } from 'react';
import { routerRedux, Route, Switch, Link } from 'dva/router';
import Debounce from 'lodash-decorators/debounce';
import Bind from 'lodash-decorators/bind';
import { connect } from 'dva';
import {
  Button,
  Menu,
  Dropdown,
  Icon,
  Row,
  Col,
  Input,
  InputNumber,
  Steps,
  Card,
  Popover,
  Badge,
  Table,
  Tooltip,
  Divider,
  Checkbox,
  Modal,
  Radio,
  Collapse,
  Select,
  message,
  Form,
  Upload,
  Spin,
  DatePicker,
} from 'antd';
import moment from 'moment';
import classNames from 'classnames';
import { getRoutes } from '../../../utils/utils';
import PageHeaderLayout from '../../../layouts/PageHeaderLayout';
import DescriptionList from '../../../components/DescriptionList';
import ProductEditor from '../../../components/Falcon/ProductEditor';
import styles from './style.less';
import { create } from 'domain';
import querystring from 'querystring';

const { Step } = Steps;
const TextArea = Input.TextArea;
const { Description } = DescriptionList;
const ButtonGroup = Button.Group;
const RadioGroup = Radio.Group;
const Option = Select.Option;
const FormItem = Form.Item;
const Panel = Collapse.Panel;

@connect(({ channel, system }) => ({
  channel,
  system,
}))
@Form.create()
export default class Step3 extends Component {
  state = {
    id: '',
    structureId: '',
    branchId: null,
    stateStructure: '',
  };

  componentDidMount() {
    const { dispatch, location } = this.props;
    const { system: { structureId, systemDetailValue } } = this.props;
    const params = querystring.parse(location.search.slice(1));
    this.setState({
      id: params.id,
      structureId,
      branchId: params.branchId,
      stateStructure: params.stateStructure,
    });
    if (systemDetailValue.parentId || params.branchId) {
      dispatch({
        type: 'system/getProductDiviList',
        payload: {
          branchId: systemDetailValue.parentId ? params.branchId : systemDetailValue.parentId,
        },
      });
    }
  }

  nextStep = () => {
    const { dispatch } = this.props;
    const form = this.formRef.props.form;
    const {
      system: { systemDetailValue, systemProductDiviList, systemEditProductDiviList },
    } = this.props;
    if (this.state.stateStructure == 6) {
      //编辑提交
      dispatch({
        type: 'system/updateBranch',
        payload: {
          id: this.state.id,
          ...systemDetailValue,
          license: systemDetailValue.license ? systemDetailValue.license : null,
          productList: systemEditProductDiviList,
        },
        callback: () => {
          const { system: { systemResult } } = this.props;
          if (systemResult.code == '200') {
            dispatch(routerRedux.push('/system/system-form/pay'));
          } else {
            message.error(systemResult.message);
          }
        },
      });
    } else {
      //新增提交
      dispatch({
        type: 'system/createBranch',
        payload: {
          ...systemDetailValue,
          license: systemDetailValue.license ? systemDetailValue.license : null,
          productList: systemProductDiviList,
        },
        callback: () => {
          const { system: { systemResult } } = this.props;
          if (systemResult.code == '200') {
            dispatch(routerRedux.push('/system/system-form/pay'));
          } else {
            message.error(systemResult.message);
          }
        },
      });
    }
  };

  previousStep = () => {
    this.props.dispatch(
      routerRedux.push(
        `/system/system-form/customer?id=${this.state.id && this.state.id}&stateStructure=${
          this.state.stateStructure
        }&type=${2}`
      )
    );
  };

  saveFormRef = formRef => {
    this.formRef = formRef;
  };

  render() {
    const { system: { streuctureLoading, systemLoading } } = this.props;
    const { stateStructure } = this.state;
    const formItemLayout = {
      labelCol: {
        span: 6,
      },
      wrapperCol: {
        span: 16,
      },
    };

    return (
      <div>
        {systemLoading ? (
          <div className={styles.spinContainer}>
            <Spin size="large" />
          </div>
        ) : (
          <div>
            <Row style={{ marginTop: '50px' }}>
              <ProductEditor
                channelDetailsState={stateStructure == 6 ? 6 : 7}
                wrappedComponentRef={this.saveFormRef}
              />
              <Row>
                <Col span={24} style={{ marginLeft: '20%' }}>
                  <FormItem
                    wrapperCol={{
                      xs: { span: 24, offset: 0 },
                      sm: {
                        span: formItemLayout.wrapperCol.span,
                        offset: formItemLayout.labelCol.span,
                      },
                    }}
                    label=""
                  >
                    <div style={{ marginTop: '40px' }}>
                      <Button onClick={this.nextStep} type="primary" loading={streuctureLoading}>
                        提交
                      </Button>
                      <Button onClick={this.previousStep} style={{ marginLeft: '20px' }}>
                        上一步
                      </Button>
                    </div>
                  </FormItem>
                </Col>
              </Row>
            </Row>
          </div>
        )}
      </div>
    );
  }
}
